import React, {Component} from 'react'
import {Button, FormControl, Icon, Select, Table, Popconfirm, Checkbox, Upload} from 'tinper-bee';
import './index.less'
import {getWorkEditDateUrl, getWorkKeyDataUrl, toggleCheckItemStatus, queryPicturesName} from '../WorkType/worktype.config'
import {vendorsWarning  as warning, vendorsDanger as danger, vendorsGetUrlParam as getUrlParam, vendorsTrimStr as trimStr, vendorsGetTId} from '../../utils/config'
import CommonModal from './../../components/CommonModal/index.jsx';
import ShowTreeToast from '../WorkQuality/ShowTreeToast.jsx'
import App from "../../layout/App";

import UploadPictures, {uploadPicToOSS, getPicturesFromOSS} from "./../WorkQuality/UploadPictures.jsx";
export default class WorkQualityEdit extends Component {
    constructor(props) {
        super(props);
        let _me = this;
        this.state = {
            errorDivFlag: '',
            param: {},
            key: '',
            productValue: '',
            showTree: false,
            deleteItemArr: [],
            isCheckNameError: false, //检查项名称错误标识
            isCheckDescriptionError: false,//检查项描述错误标识
            currentRowIndex: '',//当前行下标
            showKeepModal: false,
            noHasMoreModal: false,
            newQualityDataItem: {},
            showCloseModle: false,
            checktype:'',
            keepRepeat:false,
            iconCloseShow:false,
            defaultData: [
                {
                    key: 1,
                    checkcode: '001',
                    checkitem: '',
                    checkdescription: '',
                    needphoto: false,
                    needmeasurement: false,
                    'formflagx': '',
                    'keeprepeat':'',
                    'formflagy':''
                }
            ],
            buildData: [],
            columns: [
                {
                    title: "序号",
                    dataIndex: "checkcode",
                    key: "checkcode",
                    width: "50px",
                },
                {
                    title: "检查项名称",
                    dataIndex: "checkitem",
                    key: "checkitem",
                    width: "273px",
                    render: (text, record, index) => {
                        if (record.nochange) {
                            return <div className='div_small div_line' style={{paddingTop:'12px'}}>{record.checkitem}</div>
                        } else {
                            return (
                                <div className='div_small'>
                                    <FormControl
                                        placeholder='50个汉字、英文、数字、符号以内'
                                        onChange={this.onContentChange(index, 'checkitem')}
                                        className={this.state.isCheckNameError && this.state.currentRowIndex == index ?  record['keeprepeat']+' '+record['formflagy'] + ' ' + 'input-border-format input-border-error' : record['keeprepeat']+' '+record['formflagy'] + ' ' + 'input-border-format'}
                                        value={record.checkitem}
                                    />
                                </div>
                            )
                        }

                    }
                },
                {
                    title: "检查项描述",
                    dataIndex: "checkdescription",
                    key: "checkdescription",
                    width: "430px",
                    render: (text, record, index) => {
                        if (record.nochange) {
                            return record.checkdescription
                        } else {
                            return (
                                <div className='div_big'>
                                    <FormControl
                                        placeholder='500个汉字、英文、数字、符号以内'
                                        onChange={this.onContentChange(index, 'checkdescription')}
                                        className= {this.state.isCheckDescriptionError && this.state.currentRowIndex == index ? 'input-border-format input-border-error' : record['formflagx'] + ' ' + 'input-border-format'}
                                        value={record.checkdescription}
                                    />
                                </div>
                            )
                        }
                    }
                },
                {
                    title: "需要拍照",
                    dataIndex: "needphoto",
                    key: "needphoto",
                    width: "100px",
                    render: (text, record, index) => {
                        if (record.nochange) {
                            return <Checkbox
                                disabled
                                checked={record.needphoto}
                            />
                        } else {
                            return <Checkbox
                                checked={record.needphoto}
                                onChange={this.onCheckContentChange(index, 'needphoto')}
                            />
                        }
                    }
                },
                {
                    title: "需要测量数据",
                    dataIndex: "needmeasurement",
                    key: "needmeasurement",
                    width: "100px",
                    render: (text, record, index) => {
                        if (record.nochange) {
                            return <Checkbox
                                disabled
                                checked={record.needmeasurement}
                            />
                        } else {
                            return <Checkbox
                                checked={record.needmeasurement}
                                onChange={this.onCheckContentChange(index, 'needmeasurement')}
                            />
                        }
                    }
                },
                {
                    title: "示例照片",
                    dataIndex: "templatephoto",
                    key: "templatephoto",
                    width: "100px",
                    render: (text, record, index) => {
                        return <div >
                            {record.enableStatus === 0 ? null
                                :
                                <span  onClick={()=>{_me.handleModalStatus(true, record, index, 'edit')}}  style={{ color: '#2c7edc', cursor: 'pointer', marginRight:5}}>添加</span>
                            }
                            
                            {record.examplePictures && record.examplePictures.length >0? 
                                <span  onClick={()=>{_me.handleModalStatus(true, record, index, "browse")}}  style={{ color: '#2c7edc', cursor: 'pointer' }}>查看</span>
                                :
                                null
                            }
                        </div>
                    }
                },
                {
                    title: "操作",
                    dataIndex: "operation",
                    key: "operation",
                    width: "100px",
                    render(text, record, index) {
                        let deleteBtn;
                        if (record.nochange) {
                            deleteBtn = (
                                <span
                                    className='deleteBtn'
                                >
                                    删除
                                </span>
                            );
                        } else {
                            deleteBtn = (
                                <Popconfirm
                                    content={`您确定删除所选数据吗?`}
                                    placement="left"
                                    onClose={()=>{_me.onDelete(index)}}>
                                    <span
                                        style={{ color: '#2c7edc', cursor: 'pointer' }}
                                    >
                                        删除
                                    </span>
                                </Popconfirm>                                
                            );
                        }
                        return (
                            <div>
                                {record.enableStatus ?
                                    <div style={{ display: 'inline-block' }}>
                                        {deleteBtn}
                                        <span className="quality__tableList_upright">|</span>
                                    </div>
                                    : ''
                                }
                                <Popconfirm
                                    content={`您确定${record.enableStatus ? '停用' : '启用'}所选数据吗?`}
                                    placement="left"
                                    onClose={_me.ontoggleStatus.bind(_me, record, index)}>
                                    <span className="quality__tableList_stop">{record.enableStatus ? '停用' : '启用'}</span>
                                </Popconfirm>
                            </div>
                        )

                    }
                }
            ],
            uploadModal:false,
            fileInfoArr :[],
            currRowIndex :0,
            defaultDataForPic : [] ,
            source : ''
        }
    }
    componentDidMount() {
        let url = window.location.href;
        let param = getUrlParam(url);
        let defaultData = this.state.defaultData;
        this.setState({
            newQualityDataItem: { procedurename: ''},
            param,
            buildData: defaultData,
            key: param.key
        }, () => {
            let key = this.state.key;
            let pa = {"pkWorkquality": key,ieStamp:new Date().getTime(),isAjax:1};
            getWorkKeyDataUrl(pa).then((res) => {
                let data = res.data;
                let examplePictures = []
                examplePictures = res.data.result.itemtabledata.map((item, index)=>{
                    return item.examplePictures;
                })
                if (data.resultCode !== 'busi_ex') {
                    let checktype=data.result.checktype;
                    if (checktype == 0){
                        checktype='一般检查'
                    } else if (checktype == 1) {
                        // checktype='现场验收'
                    } else if (checktype == 2) {
                        checktype = '平行检验'
                    } else if (checktype == 3) {
                        checktype = '旁站检查 '
                    } else if (checktype == 5) {
                        checktype = '综合验收 '
                    } else if (checktype == 7) {
                        checktype = '阶段验收'
                    } else {
                        checktype = '巡查'
                    }
                    this.setState({
                        checktype, 
                        newQualityDataItem: {...data.result},
                        defaultDataForPic : [...examplePictures]
                    });
                    this.saverRenderData(data.result)
                } else {
                    danger({'text': data.exMsg})
                }
            })
        });
    }

    saverRenderData=(itemData)=>{
        let buildData=itemData.itemtabledata;
        this.setState({itemData,buildData});
    };
    handleModalStatus = (status, record, index, source) =>{
        if(status === false){
            this.setState({
                uploadModal:status,
            })
        }else{
            //本行没有默认值说明新增状态
            if(record.examplePictures && record.examplePictures.length === 0 && !this.state.defaultDataForPic[index]){
                this.setState({
                    currRowIndex : index,
                    uploadModal : status,
                    source : source,
                    fileInfoArr : []
                })
                return
            }
            let tempOSSPictureIndex = [];
            //修改本行数据
            this.state.defaultDataForPic[index] && this.state.defaultDataForPic[index].map((item, indexEach)=>{
                if(!item.isLocal){
                    tempOSSPictureIndex.push(indexEach);
                }
            })
            //修改页面， 点击行有oss图片。     
            if(tempOSSPictureIndex.length !== 0 || (record.pkWorkqualitydetail && !this.state.defaultDataForPic[index])){
                let data = record.examplePictures;

                getPicturesFromOSS.call(this, data, tempOSSPictureIndex,  ()=>{
                    let defaultDataForPic = this.state.defaultDataForPic;
                    //把oss上的图片地址放到默认数据中
                    tempOSSPictureIndex.map((item, indexEach)=>{
                        defaultDataForPic[index][item].urlCode = this.state.fileInfoArr[indexEach].urlCode;
                    })
                    this.setState({
                        uploadModal:status,
                        currRowIndex : index,
                        source : source,
                        defaultDataForPic : defaultDataForPic
                    })
                })
            }else{
                //把就是本地图片
                this.setState({
                    currRowIndex : index,
                    uploadModal : status,
                    fileInfoArr : [],
                    source : source,
                 })
            }
        }
    }
    
    setProps = (params) =>{
        //已经上传的本地图片的本地文件对象
        this.state.buildData[this.state.currentRowIndex].examplePictures = params.examplePictures;
        this.state.defaultDataForPic[this.state.currentRowIndex] = params.fileInfoArr;
        this.setState({
            buildData : this.state.buildData,
            uploadModal : params.uploadModal,
            defaultDataForPic : this.state.defaultDataForPic
        })
    }
    
    handleAdd = () => {
        if (this.state.buildData.length) {
            const newData = {
                "checkitem": "",
                "checkdescription": "",
                "needphoto": false,
                "needmeasurement": false,
                'formflagx': '',
                'keeprepeat':'',
                'formflagy':'',
                'enableStatus': 1,
                'examplePictures' :[]
            };
            this.setState({
                buildData: [...this.state.buildData, newData],
            }, () => {
                this.bindData(this.state.buildData)
            })
        } else {
            let defaultData = this.state.defaultData;
            this.setState({buildData: defaultData})
        }
    };
    onDelete = (index) => {
        if (this.state.buildData.length === 1) {
            let defaultData = this.state.defaultData;
            let buildData = this.state.buildData[0];
            if (buildData.oldItem) {
                buildData = Object.assign(buildData, {dr: 1});
                let deleteItemArr = [...this.state.deleteItemArr, buildData];
                this.setState({deleteItemArr})
            }
            this.setState({
                buildData: defaultData,
                noHasMoreModal: true,
                fileInfoArr : [],
                defaultDataForPic :[]
            });
        } else {
            const dataSource = [...this.state.buildData];
            let deleteObject = dataSource.splice(index, 1);
            deleteObject = deleteObject[0];
            let defaultDataForPic  = this.state.defaultDataForPic.splice(index, 1)
            if (deleteObject.oldItem) {
                deleteObject = Object.assign(deleteObject, {dr: 1});
                let deleteItemArr = [...this.state.deleteItemArr, deleteObject];
                this.setState({deleteItemArr})
            }
            let fileInfoArr  = this.state.fileInfoArr.splice(index, 1)
            this.setState({
                buildData: dataSource,
                fileInfoArr : this.state.fileInfoArr,
                defaultDataForPic : this.state.defaultDataForPic
            }, () => {
                this.bindData(this.state.buildData);
            });
        }
    };
    ontoggleStatus = (rec, index) => {
        let _me = this;
        let oprflag = rec.enableStatus;
        if (!rec.pkWorkqualitydetail) {
            Object.assign(_me.state.buildData[index], { enableStatus: oprflag ? 0 : 1, nochange: oprflag ? true : false })
            _me.setState({
                buildData: _me.state.buildData
            })
            return;
        }
        toggleCheckItemStatus({ ...rec, 'isAjax': 1, 'ieStamp': new Date().getTime() })
            .then(function (res) {
                if (res.data.resultCode != 'busi_ex') {
                    Object.assign(_me.state.buildData[index], Object.assign(res.data.result, { nochange: res.data.result.enableStatus ? false : true }))
                    _me.setState({
                        buildData: _me.state.buildData
                    })
                } else {
                    danger({ 'text': res.data.exMsg })
                }
            })
    }
    onContentChange = (index, ContentValue) => {
        return (e) => {
            let reg = /^\s*$/;
            let value = e.target.value;
            const buildData = [...this.state.buildData];
            if (ContentValue === 'checkitem') {
                //重置边框颜色
                this.setState({
                    isCheckNameError: false
                });
                if(value.length>50){
                    this.setState({
                        isCheckNameError: true
                    });
                    danger({'text': '请限制在50个字符之内'});
                }
                if (value.length >=  50) {
                    value=value.substring(0,50);
                }
                if (!reg.test(value)){
                    buildData[index]['formflagy'] = '';
                }
            }
            if (ContentValue === 'checkdescription') {
                //重置边框颜色
                this.setState({
                    isCheckDescriptionError: false
                });
                if(value.length>500){
                    this.setState({
                        isCheckDescriptionError: true
                    });
                    danger({'text': '请限制在500个字符之内'});
                }
                if (value.length >=  500) {
                    value=value.substring(0,500);
                }
            }
            buildData[index][ContentValue] = value;
            this.setState({buildData});
        };
    };
    onCheckContentChange = (index, ContentValue) => {
        return (value) => {
            const buildData = [...this.state.buildData];
            buildData[index][ContentValue] = value;
            this.setState({buildData});
        };
    };
    onNameChange = (e) => {
        let value = e.target.value;
        let reg = /^\s*$/;
        if(value.length>50){
            danger({'text': '请限制在50个字符之内'});
        }
        if (value.length >= 50) {
            value=value.substring(0,50);
        }
        if (!reg.test(value)){
            this.setState({errorDivFlag: ''})
        }
        let checkname = value;
        this.setState({newQualityDataItem: {...this.state.newQualityDataItem, checkname}})
    };
    handleDropSearch = (value) => {
        let checktype = value;
        if (value==0){
            this.setState({checktype:'一般检查'})
        } else if (value == 1) {
            // this.setState({checktype:'现场验收'})
        } else if (value == 2) {
            this.setState({checktype: '平行检验'})
        } else if (value == 3) {
            this.setState({checktype: '旁站检查'})
        } else if (value == 4) {
            this.setState({checktype: '巡查'})
        } else if (value == 6) {
            this.setState({checktype: '开工条件'});
        } else if (value == 7) {
            this.setState({checktype: '阶段验收'});
        } else {
            this.setState({checktype: '综合验收'})
        }
        this.setState({newQualityDataItem: {...this.state.newQualityDataItem, checktype}})
    };

    handleKeep = () => {
        let _this = this
        let buildData = _this.state.buildData;
       
        buildData = buildData.concat(_this.state.deleteItemArr);
        let checkname = _this.state.newQualityDataItem.checkname;

        if(checkname){
            checkname=trimStr(checkname);
        }
        if (_this.KeepFunction() && _this.handleBlur()) {
            _this.setState({newQualityDataItem: {..._this.state.newQualityDataItem, itemtabledata: buildData,checkname}}, () => {
                let additem = _this.state.newQualityDataItem;
                uploadPicToOSS.call(this, additem,
                    (additem)=>getWorkEditDateUrl({...additem,ieStamp:new Date().getTime(),isAjax:1}).then((res) => {
                        let data = res.data;
                        if (data.resultCode !== 'busi_ex') {
                            this.setState({
                                showKeepModal: true,
                            });
                        } else {
                            danger({'text': data.exMsg})
                        }
                    })
                );
            })
        }
    };

    
    
    handleBlur=()=>{
        let buildData=this.state.buildData;
        for (var i = 0; i < buildData.length; i++) {
            var item = buildData[i];
            var itemCheckItem=item.checkitem;
            for (var j = 0; j < buildData.length; j++) {
                var obj = buildData[j];
                var itemCompare=obj.checkitem;
                if(itemCompare){
                    if (i!==j){
                        if (itemCheckItem===itemCompare){
                            buildData[i]['keeprepeat'] = 'keeprepeat';
                            buildData[j]['keeprepeat'] = 'keeprepeat';
                            danger({'text':'检查项名称不能重复'});
                            return false
                        }else {
                            buildData[i]['keeprepeat'] = '';
                            buildData[j]['keeprepeat'] = '';
                        }
                    }
                }
            }
        }
        return true
    };
    KeepFunction = () => {
        let reg = /^\s*$/;
        let buildData = this.state.buildData;
        let checkname = this.state.newQualityDataItem.checkname;
        if(checkname){
            checkname=trimStr(checkname);
        }
        if (reg.test(checkname)) {
            this.setState({errorDivFlag: 'dispaly'});
        }else{
            this.setState({errorDivFlag: ''})
        }
        for (let i = 0; i < buildData.length; i++) {
            let item = buildData[i];
            if (reg.test(item.checkitem)) {
                item['formflagy'] = 'formflagy';
            }else{
                item['formflagy'] = '';
            }
        }
        if(reg.test(checkname)){
            danger({'text': '请输入具体内容！'});
            return false
        }
        for (let i = 0; i < buildData.length; i++) {
            let item = buildData[i];
            let key = parseInt(item.checkcode);
            if(reg.test(item.checkitem)){
                danger({'text': '请输入具体内容！'});
                // 设置错误样式
                this.setState({
                    isCheckNameError: true,
                    currentRowIndex: key - 1
                });
                return false
            }
        }
        return true
    };
    bindData = (data) => {
        let newdata = [];
        let newitem;
        for (let i = 0; i < data.length; i++) {
            let item = data[i];
            let checkcode = 1 + i;
            if (checkcode < 10) {
                checkcode = '00' + checkcode
            } else if (checkcode >= 10) {
                checkcode = '0' + checkcode
            } else if (checkcode >= 100) {
                checkcode = checkcode + i;
            }
            newitem = {...item, checkcode};
            newdata.push(newitem)
        }
        this.setState({buildData: newdata})
    };
    noHasMoreCloseModal = () => {
        this.setState({
            noHasMoreModal: false
        })
    };
    handleShowModel = () => {
        this.setState({
            showCloseModle: true,
        })
    };
    handleCloseModel = () => {
        this.setState({
            showCloseModle: false
        })
    };
    handleJumpQuality = () => {
        this.setState({
            showCloseModle: false
        });
        let {start,size}=this.state.param;
        window.location.href = `/workquality.html?start=${start}&size=${size}`
    };
    keepModalClose = () => {
        this.setState({
            showKeepModal: false
        });
    };
    KeepFinishJump = () => {
        this.setState({
            showKeepModal: false
        });
        let {key, start, size} = this.state.param;
        window.location.href = `/workqualityitem.html?key=${key}&start=${start}&size=${size}`
    };
    handleToastSearch = (productValue,pkProcedure) => {
        this.setState({
            iconCloseShow:true,
            productValue,
            newQualityDataItem: {...this.state.newQualityDataItem, procedurename: productValue,pkProcedure}
        }, () => {
            this.onCloseTree();
        })
    };
    onCloseShow=()=>{
        let newQualityDataItem=this.state.newQualityDataItem;
        for (let key in newQualityDataItem){
            if (key==='procedurename'){
                newQualityDataItem['procedurename']='';
                newQualityDataItem['pkProcedure']=''
            }
        }
        this.setState({
            newQualityDataItem,
            iconCloseShow:false,
            productValue:''
        })
    };
    onShowTree = () => {
        this.setState({showTree: true})
    };
    onCloseTree = () => {
        this.setState({showTree: false})
    };
    tableFooterInit = (currentData) => {
        let currentCode = currentData[currentData.length - 1].checkcode - 0 + 1;
        //数字位数
        let numCount = '';
        //展示在footer位置的序号
        let footerCode = '';
        if(!isNaN(currentCode)) {
            numCount = currentCode.toString().length;
            //根据不同位数定义序号
            if(numCount == 1) {
                footerCode = "00" + currentCode;
            } else if(numCount == 2) {
                footerCode = "0" + currentCode;
            } else {
                footerCode = currentCode;
            }
        }
        return (
            <div className='' style={{paddingLeft: 28}}>{footerCode}<Button className='qualityNewBuild-containers__footerTitleRight' onClick={this.handleAdd}><span>+</span>添加检查项</Button></div>
        )
    };
    handleRowClick = (rec, index) => {
        this.setState({
            isCheckNameError: false,
            isCheckDescriptionError: false,
            currentRowIndex: index
        });
    };
    render() {
        let data = this.state.buildData.length ? this.state.buildData : this.state.defaultData;
        let {checkname, procedurename, used} = this.state.newQualityDataItem;

        return (
            <App>
            <div id = 'aaaa'></div>
            <div className='qualityEdit-containers'>
                <div className='containers_top'>
                    <div className='qualityEdit-top-header'>
                        <h4 className='qualityEdit-top-header__Title'>质量标准</h4>
                        <div className="qualityEdit-top-header__Title_buttonGroup">
                            <Button colors="primary" onClick={this.handleKeep}>保存</Button>
                            <Button className="qualityEdit-top-header__Title_buttonGroup_cancel" bordered onClick={this.handleShowModel}>取消</Button>
                        </div>
                    </div>
                    <div className='qualityEdit-containers__searchGroup clearfix'>
                        <div className='qualityEdit-containers__searchOne qualityEdit-containers__searchOne--searchFrist'>
                            <div className='qualityEdit-containers__searchOne-searchLeft'>
                                <span className='qualityEdit-containers__searchOne-searchFlag'>*</span>名称
                            </div>
                            <div className='qualityEdit-containers__positionDiv'>
                                {/* {
                                    used ? <FormControl className='qualityEdit-containers__buildSearch'
                                                        value={checkname}
                                                        disabled/> : <div>
                                        <FormControl
                                            className={'qualityEdit-containers__buildSearch ' + this.state.errorDivFlag +' '+ this.state.trimDivFlag}
                                            onChange={this.onNameChange}
                                            placeholder='50个汉字、英文、数字、符号以内'
                                            value={checkname}
                                        />
                                    </div>
                                } */}
                                <FormControl
                                            className={'qualityEdit-containers__buildSearch ' + this.state.errorDivFlag +' '+ this.state.trimDivFlag}
                                            onChange={this.onNameChange}
                                            placeholder='50个汉字、英文、数字、符号以内'
                                            value={checkname}
                                    />
                            </div>
                        </div>
                        <div className='qualityEdit-containers__searchOne  clearfix'>
                            <div className='qualityEdit-containers__searchOne-searchLeft'>
                                <span className='qualityEdit-containers__searchOne-searchFlag'>*</span>
                                <span>类别</span>
                            </div>

                            <div style={{float: 'left'}}>
                                {/* {
                                    used ? <Select className='qualityEdit-containers__buildSearch '
                                                   defaultValue={"0"}
                                                   disabled
                                                   onSelect={this.handleDropSearch}>
                                        <Select.Option value="0">一般检查</Select.Option> */}
                                        {/* <Select.Option value="1">现场验收</Select.Option> 这个是最开始屏掉的，不知道以后会不会有这个选项 */}
                                        {/* <Select.Option value="2">平行检验 </Select.Option>
                                        <Select.Option value="3">旁站检查 </Select.Option>
                                        <Select.Option value="4">巡查 </Select.Option>
                                        <Select.Option value="5">综合验收 </Select.Option>
                                        <Select.Option value="6">开工条件</Select.Option>
                                    </Select> : <Select className='qualityEdit-containers__buildSearch '
                                                        value={this.state.checktype}
                                                        style={{border: 'none'}}
                                                        onSelect={this.handleDropSearch}>
                                        <Select.Option value="0">一般检查</Select.Option> */}
                                        {/*<Select.Option value="1">现场验收</Select.Option> 这个是最开始屏掉的，不知道以后会不会有这个选项 */}
                                        {/* <Select.Option value="2">平行检验 </Select.Option>
                                        <Select.Option value="3">旁站检查 </Select.Option>
                                        <Select.Option value="4">巡查 </Select.Option>
                                        <Select.Option value="5">综合验收 </Select.Option>
                                        <Select.Option value="6">开工条件</Select.Option>
                                    </Select>
                                } */}
                                <Select className='qualityEdit-containers__buildSearch '
                                    value={this.state.checktype}
                                    style={{border: 'none'}}
                                    onSelect={this.handleDropSearch}>
                                    <Select.Option value="0">一般检查</Select.Option>
                                    {/*<Select.Option value="1">现场验收</Select.Option>*/}
                                    <Select.Option value="2">平行检验 </Select.Option>
                                    <Select.Option value="3">旁站检查 </Select.Option>
                                    <Select.Option value="4">巡查 </Select.Option>
                                    <Select.Option value="5">综合验收 </Select.Option>
                                    <Select.Option value="6">开工条件</Select.Option>
                                    <Select.Option value="7">阶段验收</Select.Option>
                                </Select>
                            </div>
                        </div>
                        <div className='qualityEdit-containers__searchOne' style={{position: 'relative'}}>
                            <div  className='qualityEdit-containers__searchOne-searchLeft'>工序</div>
                            <div style={{display: 'inline-block'}}>
                                                <FormControl  className={'qualityEdit-containers__buildSearch qualityEdit-containers__floatLeft'}
                                                               value={procedurename}
                                                               placeholder='请选择'
                                                               onClick={this.onShowTree}/>
                                                <div className='qualityEdit-containers__IconSearch qualityEdit-containers__floatLeft'>
                                                <Icon type="uf-search" onClick={this.onShowTree}/>
                                            </div>
                            </div>
                            {!used&&this.state.iconCloseShow?<Icon type="uf-close" className='iconClose' onClick={()=>{
                                this.onCloseShow()
                            }}/>:null}
                        </div>
                    </div>
                </div>
                <div className='containers_bottom'>
                    <div className='bottom_top clearfix'>
                        <div className='title_left'>
                            <span className='blue_flag'></span>
                            <span>检查项列表</span>
                        </div>
                    </div>
                    <div className='bottom_center'>
                        <Table
                            bordered
                            data={data}
                            columns={this.state.columns}
                            footer={currentData => this.tableFooterInit(currentData)}
                            onRowClick={(rec, index, event) => this.handleRowClick(rec, index)}
                        />
                    </div>
                    <div className='bottom_bottom'>
                        <div className='btn_group'>
                            <CommonModal show={this.state.showCloseModle}
                                         cancel={this.handleCloseModel}
                                         confirm={this.handleJumpQuality}
                                         content={'一旦执行，所填信息将会丢失！是否确认？'}
                                         backdrop={false}
                                         bindCancel={true}
                            />
                            <CommonModal show={this.state.showKeepModal}
                                         cancel={this.keepModalClose}
                                         confirm={this.KeepFinishJump}
                                         content={'保存成功！'}
                                         backdrop={false}
                                         oneButton={true}
                                         bindTrue={true}
                            />
                            <CommonModal show={this.state.noHasMoreModal}
                                         cancel={this.noHasMoreCloseModal}
                                         confirm={this.noHasMoreCloseModal}
                                         content={'已经没有检查项了，无法再删除！！'}
                                         backdrop={false}
                                         oneButton={true}
                                         bindCancel={true}
                            />
                        </div>
                    </div>
                </div>
                <ShowTreeToast showModal={this.state.showTree}
                               onToastSearch={this.handleToastSearch}
                               close={this.onCloseTree}/>
                <UploadPictures 
                    status = {this.state.source}
                    showModal={this.state.uploadModal} 
                    currentRowIndex = {this.state.currRowIndex}  //当前行
                    close={()=>{this.handleModalStatus(false)}}
                    setProps = {this.setProps}
                    fileInfoArr = {this.state.fileInfoArr}//oss地址的换村对象
                    defaultDataForPic = {this.state.defaultDataForPic} //所有的图片的数据对象
                />
            </div>
            </App>
        )
    }
}